<template>
  <div class="cart-sku" ref="target">
    <div class="attrs" @click="cut">
      <span class="ellipsis">{{attrsText}}</span>
      <i class="iconfont icon-angle-down"></i>
    </div>
    <div class="layer" v-if="isShow">
      <div class="loading" v-if="!goods"></div>
      <template  v-else>
      <GoodsSku @change='skuIdChange' :goods="goods" :skuId="skuId" />
       <XtxButton  type="primary" size="mini" style="margin-left:60px" @click="OkBtn">确认</XtxButton>
      </template>
    </div>
  </div>
</template>
<script>
import { getSpecsAndSkus } from '@/api/product'
import { ref } from 'vue'
import { onClickOutside } from '@vueuse/core'
import GoodsSku from '@/views/goods/components/goods-sku.vue'
import Message from '@/components/library/Message'
export default {
  components: { GoodsSku },
  name: 'CartSku',
  props: {
    attrsText: {
      type: String
    },
    skuId: {
      type: String
    }
  },
  setup (props, { emit }) {
    const goods = ref(null)
    const isShow = ref(false)
    const show = () => {
      skuObj.value = null
      isShow.value = true
      // 发请求根据skuId拿到规格数据
      getSpecsAndSkus(props.skuId).then(res => {
        goods.value = res.result
      })
    }
    const hide = () => {
      isShow.value = false
      goods.value = null
    }
    const cut = () => {
      isShow.value ? hide() : show()
    }
    // 点击盒子外面也隐藏
    const target = ref(null)
    onClickOutside(target, () => {
      hide()
    })
    // 得到选择规格子组件传过来的skuId对象
    const skuObj = ref({})
    const skuIdChange = (val) => {
      skuObj.value = val
    }
    // 点击确定按钮
    const OkBtn = () => {
      if (!skuObj.value) {
        hide()
        return
      }
      //
      if (skuObj.value.skuId) {
        emit('change', skuObj.value)
        hide()
      } else return Message({ type: 'warn', text: '请选择完整规格' })
    }
    return { isShow, show, hide, cut, target, goods, skuIdChange, OkBtn }
  }
}
</script>
<style scoped lang="less">
.cart-sku {
  height: 28px;
  border: 1px solid #f5f5f5;
  padding: 0 6px;
  position: relative;
  margin-top: 10px;
  display:inline-block;
  .attrs {
    line-height: 24px;
    display: flex;
    span {
      max-width: 230px;
      font-size: 14px;
      color: #999;
    }
    i {
      margin-left: 5px;
      font-size: 14px;
    }
  }
  .layer {
    position: absolute;
    left: -1px;
    top: 40px;
    z-index: 10;
    width: 400px;
    border: 1px solid @xtxColor;
    box-shadow: 2px 2px 4px lighten(@xtxColor,50%);
    background: #fff;
    border-radius: 4px;
    font-size: 14px;
    padding: 20px;
    &::before {
      content: "";
      width: 12px;
      height: 12px;
      border-left: 1px solid @xtxColor;
      border-top: 1px solid @xtxColor;
      position: absolute;
      left: 12px;
      top: -8px;
      background: #fff;
      transform: scale(.8,1) rotate(45deg);
    }
    .loading {
      height: 224px;
      background: url(~@/assets/images/loading.gif) no-repeat center;
    }
  }
}
</style>
